*
    margin 0
    padding 0

body
    background-color #1acbfc

.traffic-light
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    height 22.5em
    width 10em
    background-color #333333
    border: .51em solid #eeeeee
    border-radius: 2em
    z-index 10

.traffic-light::before
    content: ''
    width 3em
    height 8em
    position: absolute
    top: 100%
    left 50%
    transform: translateX(-50%)
    background-color #eee
    background linear-gradient(rgba(240,240,240,0.9),#1acbfc)
    z-index 10

.light
    width 6em
    height 5.5em
    border-radius: 50%
    background #000
    border: 1px solid #000000
    margin 1em auto

.red
    animation light-red  10s linear infinite

.amber
    animation light-amber  10s linear infinite

.green
    animation light-green  10s linear infinite

@keyframes light-red 
    0%
        background-color #000000

    1%,21%
        background-color red
    
    22%,100%
        background-color #000000


@keyframes light-amber
    0%,20%
        background-color #000000

    22%,41%
        background-color #ff7e00

    42%,100%
        background-color: #000000

   

@keyframes light-green 
    0%,40%
        background-color #000000

    43%,98%
        background-color green
    
    99%,100%
        background-color #000000

        
        





